<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="个人资料" :isBackIndex="isBackIndex"></fa-navbar>
		<!-- 内容 -->
		<view class="u-p-30">
			<u-form :model="form" ref="uForm">
				<u-form-item :label-position="labelPosition" label="头像:" prop="avatar" label-width="150">
					<u-image width="100" height="100" :src="url || userInfo.avatar" @click="chooseAvatar"></u-image>
				</u-form-item>
				<u-form-item label="微信:" prop="wx" label-width="150">
					<u-input v-model="form.wx" />
				</u-form-item>
				<u-form-item label="邮箱:" prop="email" label-width="150">
					<u-input v-model="form.email" />
				</u-form-item>
        <view @click="editProfile">
          <view class="jianjie">简介:</view>
        </view>
		
		<view class="">
			<view class="tag" style="margin-top: 32upx;">
				行业:
			</view>
			<view class="">
				<view :key="index" v-for="(tag,index) in tagList"></view>
				<robby-tags v-model="tagList" @add="addTag" @delete="delTag" @click="clickTag" :enable-del="enableDel" :enable-add="enableAdd"></robby-tags>
			</view>
		</view>
		
			</u-form>
			<view class="u-p-30">
				<u-button type="primary" hover-class="none"
					:custom-style="{ backgroundColor: theme.bgColor, color: theme.color }" @click="submit">提交</u-button>
			</view>
		</view>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import {
		avatar
	} from '@/common/fa.mixin.js';
	import robbyTags from '@/pages/my/robby-tags/robby-tags.vue';
		
	export default {
		components: {
			robbyTags
		},
		mixins: [avatar],
		computed: {
			userInfo() {
				if (this.vuex_user.avatar && this.vuex_user.avatar.indexOf('data:image/svg+xml;base64') == -1) {
					this.form.avatar = this.vuex_user.avatar;
				}
				this.form.wx = this.vuex_user.wechat;
				this.form.email = this.vuex_user.email;
				return this.vuex_user;
			}
		},
		onLoad() {
			this.tagList = this.vuex_user.industry;
		},
		onShow() {
			//移除事件监听
			uni.$off('uAvatarCropper', this.upload);
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				labelPosition: 'left',
				url: '',
        isBackIndex:4,
				form: {
					wx: '',
					email: '',
					bio: ''
				},
				rules: {
					wx: [{
						required: true,
						message: '请输入微信',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}]
				},
				enableDel: true,
				enableAdd: true,
				colorType: 'primary',
				tagList: []
			};
		},
		methods: {
      editProfile(){
        this.$u.route('/pages/user/edit');
      },
			submit() {

        var that =this;

				this.$refs.uForm.validate(async valid => {
					if (valid) {
						if(this.tagList && this.tagList.length > 0){
							let industry = this.tagList.join("\r\n");
							this.form.industry = industry;
						}else{
							this.form.industry = '';
						}
						let res = await this.$api.getUserProfile(this.form);
						this.$u.toast(res.msg);
						if (res.code) {
							setTimeout(() => {
								// uni.$u.route({
								// 	type: 'back'
								// });
                that.$u.route('/pages/index/card');
							}, 800)
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			clickTag: function(e){
				console.log(e)
			},
			delTag: function(e){
				console.log(e)
			},
			addTag: function(e){
				console.log('add',e)
			}
		}
	};
</script>

<style >
.jianjie{
  padding: 30rpx 0;
  border-bottom: 0.5rpx solid #dcdfe6;
}
</style>
